<template>
	<view class="">
		<view @touchmove.stop.prevent :class="isshowpopup ? 'shade' : ''"></view>
		<view class="agricltural">
			<!-- 主标题 -->
			<view class="title-list">
				<view v-for="(item, index) in titleList" :key="index" :class="active == index + 1 ? 'active-style' : ''" @click="activeC(index + 1, item.id)">
					{{ item.cate_name }}
				</view>
			</view>

			<view class="">
				<!-- 副标题 -->
				<view class="subtitle-list">
					<view :class="subactive == 1 ? 'subactive-style' : ''" @click="subactiveC(1)">综合排序</view>
					<view :class="subactive == 2 ? 'subactive-style' : ''" @click="subactiveC(2)">节气优先</view>
					<view :class="subactive == 3 ? 'subactive-style' : ''" @click="subactiveC(3)">种植优先</view>
				</view>
				<view>
					<view class="">
						<view class="zhranking" v-for="i in shoppingList" :key="i">
							<view class="" @click="goDetail(i.id)"><image :src="i.image" mode=""></image></view>
							<!-- <view class="place"></view> -->
							<view class="productsintroduction">
								<view class="">{{ i.store_name }}</view>
								<view class="">{{ i.store_info }}</view>
								<view class="">
									<view class="">
										价格：
										<text style="display: inline-block;">￥{{ i.is_spec == 0 ? i.price : i.specs[0].price }}</text>
										元起
										<text style="display:inline-block;margin-left: 15rpx;font-size: 22rpx;text-decoration: line-through;color:#ccc">
											<text style="color: #ccc">原价：</text>
											<text>{{ i.is_spec == 0 ? i.ot_price : i.ot_price }}</text>
										</text>
									</view>
									<view @click="submitOrder(i.id, i.is_spec, i)">立即购买</view>
								</view>
							</view>
						</view>
						<view class="zanwu" v-if="shoppingList.length == 0"><view class="">暂无数据</view></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部弹出框 -->
		<view class="popup" v-show="isshowpopup" @touchmove.stop.prevent>
			<!-- 关闭弹窗 -->
			<view class="" @click="closePopup"><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/6f924202209222017187961.png" mode=""></image></view>
			<view class="">
				<view class=""><image :src="images" mode=""></image></view>
				<view class="">
					<view class="">
						<view class="">￥{{ shoppingPrice == '' ? 0 : shoppingPrice }}</view>
						<view class="">库存：{{ kucun }}件</view>
					</view>
					<view class="" style="color: #289958;">会员:￥{{ shoppingMemberPrice == '' ? 0 : shoppingPrice }}</view>
					<!-- <view class="">一箱，公一袋</view> -->
				</view>
			</view>
			<!-- 规格 -->
			<view class="">
				<view class="">规格</view>
				<view class="guigelist">
					<view class="">
						<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false">
							<view style="display: flex;flex-wrap: wrap;justify-content: flex-start;" class="">
								<view
									v-for="(i, index) in specsList"
									:key="i.id"
									@click="selectSpecification(i, index)"
									:class="specificationindex == index ? 'selectactive' : ''"
									class="specification"
								>
									{{ i.sku }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 数量 -->
			<view class="count">
				<view class="">数量</view>
				<view class="">
					<view class="" @click="buyNum(0)">-</view>
					<view class="">{{ buynum }}</view>
					<view class="" @click="buyNum(1)">+</view>
				</view>
			</view>

			<view class=""><view class="" @click="specs">立即购买</view></view>
		</view>
	</view>
</template>

<script>
import { classGtShoppingClass, classLtShoppingClass, promptlyBuy, payOrder, getOrderCode, updateShoppingCount } from '@/api/api.js';
export default {
	data() {
		return {
			active: 1,
			subactive: 1,
			titleList: [], //标题列表
			specificationindex: 0, //规格序号
			shoppingList: [], // 商品列表
			specsList: [],
			buynum: 1, //购买数量
			specsId: '', //规格ID
			shoppingId: '', //商品ID
			shoppingPrice: '',
			shoppingMemberPrice: '',
			titleId: '', // 标题Id
			limit: 15,
			orderkey: '',
			isshowpopup: false, //是否打开弹窗,
			images: '',
			cardId: '',
			kucun: ''
		};
	},
	onLoad() {
		uni.showLoading({})
		this.classGtShoppingClass();
	},
	// 分享
	onShareAppMessage() {
		return {
			title: '优栽园',
			path: 'page_home/agriculturalproduct/agriculturalproduct'
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: '优栽园',
			path: 'page_home/agriculturalproduct/agriculturalproduct'
		};
	},
	methods: {
		// 获取大分类
		classGtShoppingClass() {
			let data = `group_id=${2}`;
			classGtShoppingClass(data).then(res => {
				if(res.data.code == '200'){
					uni.hideLoading()
					this.titleList = res.data.data;
					this.titleId = this.titleList[0].id;
					this.classLtShoppingClass(this.titleId, this.subactive);
				}else {
					uni.hideLoading()
				}
				
			});
		},
		// 商品列表
		classLtShoppingClass(id, type) {
			uni.showLoading({})
			let data = `cId=${id}&type=${type}&page=${1}&limit=${this.limit}`;
			classLtShoppingClass(data).then(res => {
				if(res.data.code =='200'){
					uni.hideLoading()
					this.shoppingList = res.data.data.list;
				}else {
					uni.hideLoading()
				}
			});
		},
		// 选择主标题
		activeC(type, id) {
			this.active = type;
			this.titleId = id;
			this.classLtShoppingClass(id, this.subactive);
		},
		// 选择副标题
		subactiveC(type) {
			this.subactive = type;
			this.classLtShoppingClass(this.titleId, this.subactive);
		},
		// 购买数量
		buyNum(type) {
			if (type == 0) {
				if (this.buynum == 1) return;
				else {
					this.buynum--;
					let data = `cartId=${this.cardId}&cartNum=${this.buynum}`;
					updateShoppingCount(data).then(res => {});
				}
			} else {
				this.buynum++;
				let data = `cartId=${this.cardId}&cartNum=${this.buynum}`;
				updateShoppingCount(data).then(res => {});
			}
		},

		// 关闭弹窗
		closePopup() {
			this.isshowpopup = false;
		},
		// 立即购买
		submitOrder(id, status, i) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
						}
					}
				});
				return;
			}
			this.shoppingId = id;
			let that = this;
			// 获取订单数据
			if (status == 0) {
				let orderdata = `productId=${id}&spec_id=${0}`;
				promptlyBuy(orderdata).then(res => {
					if (res.data.code == '200') {
						this.cardId = res.data.data.cartId;
						this.isshowpopup = false;
						uni.navigateTo({
							url: `/page_shoppingcart/submitorder/submitorder?cardId=${this.cardId}&new=${1}`
						});
						// this.getOrderCode(this.cardId,id)
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});
			} else {
				this.shoppingList.forEach(item => {
					if (item.id == id) {
						this.images = item.image;
						this.shoppingPrice = item.specs[0].price;
						this.shoppingMemberPrice = item.specs[0].vip_price;
						this.kucun = item.specs[0].stock;
						this.specsList = item.specs;
					}
				});
				let orderdata = `productId=${this.shoppingId}&spec_id=${0}`;
				promptlyBuy(orderdata).then(res => {
					if (res.data.code == '200') {
						this.cardId = res.data.data.cartId;
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});

				this.isshowpopup = true;
			}
		},
		selectSpecification(i, index) {
			this.shoppingPrice = i.price;
			this.shoppingMemberPrice = i.vip_price;
			this.kucun = i.stock;
			this.specificationindex = index;
			this.specsId = i.id;
		},
		// 立即购买
		specs() {
			if (this.specsId == '') {
				this.specsId = this.specsList[0].id;
			}
			let orderdata = `productId=${this.shoppingId}&spec_id=${this.specsId}&cartNum=${this.buynum}`;
			promptlyBuy(orderdata).then(res => {
				if (res.data.code == '200') {
					this.cardId = res.data.data.cartId;
					this.isshowpopup = false;
					uni.navigateTo({
						url: `/page_shoppingcart/submitorder/submitorder?cardId=${this.cardId}&new=${1}`
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},

		getOrderCode(id, productId) {
			let ordercode = `cartId=${id}&cateNum=${1}`;
			getOrderCode(ordercode).then(res => {
				let data = {
					special_id: productId,
					pay_type_num: 40,
					payType: 'weixin',
					from: 'weixin',
					useGold: false,
					key: res.data.data.orderKey,
					link_pay_uid: '',
					price_id: 0,
					group_id: 3
				};
				payOrder(data).then(res => {
					if (res.data.code == '200') {
						let obj = res.data.data.result.jsConfig;
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							appId: obj.appid,
							timeStamp: obj.timestamp, // 时间戳
							nonceStr: obj.nonceStr, // 随机字符串
							package: obj.package,
							signType: obj.signType, // 签名算法
							paySign: obj.paySign, // 签名
							success: function(red) {
								uni.reLaunch({
									url: '/page_shoppingcart/paysucceed/paysucceed?orderId=' + res.data.data.result.orderId
								});
							},
							fail: function(err) {
								uni.reLaunch({
									url: '/page_shoppingcart/orderdetail/orderdetail?orderId=' + res.data.data.result.orderId
								});
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'error'
						});
					}
				});
			});
		},
		goDetail(id) {
			uni.navigateTo({
				url: '/page_home/agriculturaldetail/agriculturaldetail?id=' + id
			});
		}
	}
};
</script>

<style lang="scss">
// 遮罩层
.shade {
	position: fixed;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}
.agricltural {
	padding: 20rpx;
}

.title-list {
	display: flex;
	justify-content: space-around;
	font-size: 30rpx;
}

.title-list view {
	padding: 10rpx 0;
}

.subtitle-list {
	display: flex;
	justify-content: center;
	text-align: center;
}

.subtitle-list view {
	padding: 30rpx 20rpx;
	flex: 1;
	font-size: 28rpx;
}

.active-style {
	text-align: center;
	color: #6fbc7e;
	font-weight: 700;
	border-bottom: 6rpx solid #6fbc7e;
}

.subactive-style {
	color: #6fbc7e;
}

.zhranking {
	border-radius: 12rpx;
	background-color: #fff;
	box-shadow: 0 2px 3px 3px #ddd;
	position: relative;
	margin-bottom: 20rpx;
}

.zhranking image {
	width: 100%;
	height: 500rpx;
	border-radius: 12rpx 12rpx 0 0;
}

.zhranking .productsintroduction {
	padding: 0 20rpx 20rpx;

	> view:nth-child(1) {
		font-weight: 700;
		font-size: 30rpx;
	}

	> view:nth-child(2) {
		font-size: 24rpx;
		color: #bbb;
		padding: 10rpx 0;
	}

	> view:nth-child(3) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;

		> view:nth-child(1) {
			> text {
				color: #e76d6c;
				padding: 0 10rpx 0 0;
			}
		}

		> view:nth-child(2) {
			padding: 20rpx 35rpx;
			background-color: #289857;
			color: #fff;
			border-radius: 50px;
			font-size: 24rpx;
		}
	}
}

.place {
	position: absolute;
	top: 67%;
	left: 0;
	height: 30rpx;
	width: 100%;
	background-color: #fff;
	z-index: 1000;
}

.popup {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	height: 1100rpx;
	border-radius: 20rpx;
	padding: 20rpx 0;
	z-index: 100;
	width: 100%;
	animation: move 0.3s;

	> view:nth-child(1) {
		text-align: right;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}

	> view:nth-child(2) {
		display: flex;

		image {
			padding: 0 40rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}

		> view:nth-child(2) {
			flex: 2;
			padding: 15rpx 30rpx 15rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			> view:nth-child(1) {
				display: flex;
				justify-content: space-between;

				> view:nth-child(1) {
					flex: 1;
					font-size: 34rpx;
					font-weight: 700;
				}

				> view:nth-child(2) {
					font-size: 28rpx;
					color: #ccc;
				}
			}

			> view:nth-child(3) {
				font-size: 24rpx;
				color: #ccc;
			}
		}
	}

	> view:nth-child(3) {
		padding: 40rpx;
		height: 600rpx;
		overflow: hidden;
		overflow-x: hidden;
		overflow-y: scroll;

		> view:nth-child(1) {
			font-size: 30rpx;
		}

		> view:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			view {
				.specification {
					margin: 10rpx 8rpx;
					border-radius: 50px;
					padding: 18rpx 30rpx;
					font-size: 26rpx;
					color: #888;
					background-color: #f5f5fa;
				}
			}
		}
	}

	> view:nth-child(3)::-webkit-scrollbar {
		display: none;
	}

	> view:nth-child(4) {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;

		> view:nth-child(2) {
			display: flex;
			text-align: center;

			> view:nth-child(1) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
			}

			> view:nth-child(2) {
				border-radius: 5rpx;
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
				margin: 0 10rpx;
			}

			> view:nth-child(3) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #258f52;
				color: #fff;
			}
		}
	}

	> view:nth-child(5) {
		position: fixed;
		text-align: center;
		bottom: 40rpx;
		left: 7%;
		width: 600rpx;
		border-radius: 50px;
		background-color: #289958;
		padding: 25rpx;
		color: #fff;
	}
}

.selectactive {
	background-color: #eefbf1 !important;
	color: #40a56b !important;
}

.vip-price {
	background: url('http://www.szzn.group/uploads/20221107/cff5eef9aff3b57dec33fbfeb9ddc5b7.png') no-repeat;
	background-size: 100% 100%;
	width: 180rpx;
	font-size: 28rpx;
	color: #438062;
}

.subtitle {
	width: 450rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-pic {
	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.zhaopai {
	font-size: 24rpx;
}

.count {
	position: fixed;
	bottom: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 670rpx;
}
.zanwu {
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
	color: #ccc;
}

@keyframes move {
	0% {
		height: 0;
	}

	100% {
		height: 1100rpx;
	}
}
.scroll-Y {
	height: 550rpx;
}
</style>
